import React, {RefObject} from 'react'
import IconMdi from '@mdi/react'
import {COLORS} from '../color'

export type IconSizeType = '12px' | '16px' | '20px' | '24px' | '28px' | '32px' | '36px' | '40px'

interface IconProps {
  id?: string
  path: string
  color?: string
  size?: number | IconSizeType
  className?: string
  title?: string
}

const Icon: React.FC<IconProps & {ref?: React.Ref<any>}> = React.forwardRef(
  (props, ref: RefObject<SVGSVGElement> | any): React.ReactElement => {
    const convertSize = (iconSize: IconSizeType | number): number => {
      switch (iconSize) {
        case '12px': {
          return 0.5
        }
        case '16px': {
          return 0.667
        }
        case '20px': {
          return 0.8335
        }
        case '24px': {
          return 1
        }
        case '28px': {
          return 1.1667
        }
        case '32px': {
          return 1.3335
        }
        case '36px': {
          return 1.5
        }
        case '40px': {
          return 1.667
        }
        default: {
          return iconSize as number
        }
      }
    }

    return (
      <IconMdi
        id={props.id}
        ref={ref}
        className={props.className}
        size={props.size ? convertSize(props.size) : 1}
        color={props.color ?? COLORS.gray600}
        path={props.path}
        title={props.title}
      />
    )
  },
)

export default Icon
